<template>
	<view class="login-container">
		<!-- 背景装饰 -->

		<!-- 登录卡片 -->
		<view class="login-card">
			<!-- 标题区域 -->
			<view class="header">
				<text class="welcome">欢迎回来</text>
				<text class="subtitle">请输入您的账号和密码</text>
			</view>

			<!-- 表单区域 -->
			<view class="form">
				<!-- 账号输入 -->
				<view class="input-group">
					<view class="input-wrapper">
						<uni-easyinput class="uni-mt-5" trim="all" v-model="formData.username" placeholder="请输入用户名" prefixIcon ="person"
							@input="clearError('username')"></uni-easyinput>
					</view>
					<text class="error-msg" v-if="errors.username">{{ errors.username }}</text>
				</view>

				<!-- 密码输入 -->
				<view class="input-group">
					<view class="input-wrapper">
						<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" prefixIcon ="locked"
							@input="clearError('password')"></uni-easyinput>
					</view>
					<text class="error-msg" v-if="errors.password">{{ errors.password }}</text>
				</view>


				<!-- 登录按钮 -->
				<button class="btn-primary btn-big" :class="{ loading: isLoggingIn }" @tap="handleLogin" :disabled="isLoggingIn">
					<text v-if="!isLoggingIn">登录</text>
					<text v-else>登录中...</text>
				</button>

			</view>
		</view>
	
		<view class="login-image">
			<image src="/static/imgs/header.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				errors: {
					username: '',
					password: ''
				},
				rememberMe: false,
				isLoggingIn: false
			}
		},

		onLoad() {
			// 尝试从缓存中获取记住的账号密码
			// this.tryLoadRememberedData()
		},

		methods: {
			// 清除错误信息
			clearError(field) {
				this.errors[field] = ''
			},

			// 验证用户名
			validateUsername() {
				if (!this.formData.username.trim()) {
					this.errors.username = '请输入账号'
					return false
				}
				if (this.formData.username.length < 3) {
					this.errors.username = '账号至少3个字符'
					return false
				}
				return true
			},

			// 验证密码
			validatePassword() {
				if (!this.formData.password) {
					this.errors.password = '请输入密码'
					return false
				}
				if (this.formData.password.length < 6) {
					this.errors.password = '密码至少6个字符'
					return false
				}
				return true
			},

			// 处理登录
			async handleLogin() {
				const isUsernameValid = this.validateUsername()
				const isPasswordValid = this.validatePassword()

				if (!isUsernameValid || !isPasswordValid) {
					uni.showToast({
						title: '请完善登录信息',
						icon: 'none'
					})
					return
				}

				this.isLoggingIn = true
				await this.$cloudOBjAjax('sunny-users', 'login', {
					username: this.formData.username,
					password: this.formData.password
				}).then(res => {
					this.$simpleToast('登录成功')
					this.$store.commit('app/setUserInfo', res)
					const expireTime = Date.now() + 24 * 60 * 60 * 1000 // 1天
					const rememberData = {
						username: this.formData.username,
						expireTime: expireTime
					}
					uni.setStorageSync('rememberedLoginData', rememberData)
					uni.switchTab({
						url: "/pages/main/main"
					})
				}).catch(err => {
					uni.showToast({
						title: err.errMsg || '出错了',
						icon: 'none'
					})
					this.isLoggingIn = false
				})
			},

			// 尝试加载记住的账号密码（检查是否在1天有效期内）
			tryLoadRememberedData() {
				try {
					const rememberData = uni.getStorageSync('rememberedLoginData')
					if (rememberData) {
						// 检查是否过期
						if (Date.now() < rememberData.expireTime) {
							this.formData.username = rememberData.username
							this.formData.password = rememberData.password
							this.rememberMe = true
							uni.navigateTo({
								url: "/pages/main/main"
							})
						} else {
							// 已过期，清除缓存
							uni.removeStorageSync('rememberedLoginData')
						}
					}
				} catch (e) {
					console.log('读取缓存失败', e)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-container {
		min-height: 100%;
		background: linear-gradient(225.16deg, #007BFF 0%, #36A0FF 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}
	
	.login-image {
		position: absolute;
		bottom: 0;
		left:0;
		right:0;
		width: 100%;
		z-index: 0;
		image {
			width: 100%;
		}
	}

	.bg-decoration {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
	}

	.circle-1 {
		width: 200rpx;
		height: 200rpx;
		top: 10%;
		left: 10%;
	}

	.circle-2 {
		width: 150rpx;
		height: 150rpx;
		top: 60%;
		right: 10%;
	}

	.circle-3 {
		width: 100rpx;
		height: 100rpx;
		bottom: 20%;
		left: 20%;
	}

	.login-card {
		background: #fff;
		border-radius: 24rpx;
		padding: 60rpx 50rpx;
		width: 100%;
		max-width: 600rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 1;
	}

	.header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.welcome {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.subtitle {
		display: block;
		font-size: 28rpx;
		color: #666;
	}

	.input-group {
		margin-bottom: 40rpx;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		border: 2rpx solid #e0e0e0;
		border-radius: 16rpx;
		padding-right: 5rpx;
		padding-left: 20rpx;
		background: #fafafa;
		transition: all 0.3s;
	}

	.input-wrapper:focus-within {
		border-color: #667eea;
		background: #fff;
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
	}

	.icon {
		font-size: 32rpx;
		margin-right: 20rpx;
		color: #999;
	}

	.error-msg {
		display: block;
		color: #ff4757;
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.remember-me {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.checkbox {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ccc;
		border-radius: 6rpx;
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
	}

	.checkbox.checked {
		border-color: #667eea;
		background: #667eea;
	}

	.checkmark {
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
	}

	.option-text {
		font-size: 26rpx;
		color: #666;
	}

	.login-btn {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		border: none;
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 40rpx;
		margin-top: 20rpx;
		line-height: 60rpx;
		transition: all 0.3s;
	}

	.login-btn:active {
		transform: translateY(2rpx);
	}

	.login-btn.loading {
		opacity: 0.7;
	}

	.register-link {
		text-align: center;
		font-size: 26rpx;
		color: #666;
	}

	.link {
		color: #667eea;
		margin-left: 16rpx;
		font-weight: 500;
	}

	::v-deep .uni-easyinput__content {
		border: none !important;
		background: transparent !important;
	}

	::v-deep .uni-easyinput__content-input {
		height: 80rpx;
		font-size: 28rpx;
	}

	::v-deep .is-input-border {
		border: none !important;
	}
	
	.btn-primary {
		border-radius: 100rpx;
	}
</style>